<template>

  <div v-loading="allLoading">
    <!-- 幻灯片 开始 -->
    <!--<div v-swiper:mySwiper="swiperOption" style="height: 363px">
      <div class="swiper-wrapper">
        <div v-for="banner in bannerList" :key="banner.id" class="swiper-slide" style="background: #040B1B;">
          <a target="_blank" :href="banner.linkUrl">
            <img width="100%"
                 :src="banner.imageUrl"
                 :alt="banner.title"/>
          </a>
        </div>


      </div>
      <div class="swiper-pagination swiper-pagination-white"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>

    </div>-->
    <!--修改成组件 by roncoo-->
    <YBanner :data="bannerList" :classList="subjectList" :height="360"/>
    <!-- 幻灯片 结束 -->
    <div style="min-height: 850px">
      <div id="aCoursesList" v-if="!allLoading">
        <!-- 网校课程 开始 -->
        <div>
          <section class="container">
            <header class="comm-title">
              <h2 class="tac">
                <span class="c-333">热门课程</span>
              </h2>
            </header>
            <div>
              <el-skeleton :loading="loading" animated>
                <!--骨架-->
                <template slot="template">
                  <div class="comm-course-list">
                    <ul>
                      <!--课程数据渲染-->
                      <li v-for="(item, index) in 8" v-bind:key="index" :throttle="500">
                        <div class="cc-l-wrap">
                          <el-skeleton-item
                            variant="image"
                            style="width: 270px; height: 152px;"
                          />
                          <div style="padding: 14px;">
                            <el-skeleton-item variant="h3" style="width: 50%;"/>
                            <div
                              style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
                            >
                              <el-skeleton-item variant="text" style="margin-right: 16px;"/>
                              <el-skeleton-item variant="text" style="width: 30%;"/>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                    <div class="clear"></div>
                  </div>
                </template>
                <template>
                  <!--课程信息-->
                  <article class="comm-course-list">
                    <ul id="bna">
                      <!--课程数据渲染-->
                      <li v-for="(course, index) in courseList" v-bind:key="index">
                        <div class="cc-l-wrap" :class="course.classTag">
                          <section class="course-img ">
                            <img
                              :src="course.cover"
                              class="img-responsive"
                              :alt="course.title"
                            >
                            <div class="cc-mask">
                              <a :href="'/course/'+course.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                            </div>
                          </section>
                          <h3 class="hLh30 txtOf mt10">
                            <p class="course-title fsize15">{{course.title}}</p>
                          </h3>
                          <section class="mt10 hLh20 of">
                     <span class="fr jgTag bg-green" v-if="Number(course.price) === 0">
                    <i class="c-fff fsize12 f-fA">免费</i>
                    </span>
                            <span class="fr price" style="margin-right: 10px" v-else>
                        ￥{{course.price}}
                              <!--                    <i class="c-fff fsize12 f-fA" style="font-weight: 700!important;"> ￥{{course.price}}</i>-->
                    </span>
                            <span class="fl jgAttr c-ccc f-fA" style="padding: 0 10px">
                        <i class="c-999 f-fA">{{course.buyCount}}人学习</i>
                        |
                        <i class="c-999 f-fA">{{course.viewCount}}评论</i>
                      </span>
                          </section>
                        </div>
                      </li>
                    </ul>
                    <div class="clear"></div>
                  </article>
                </template>
              </el-skeleton>
              <section class="tac pt20">
                <a href="/course" title="全部课程" class="comm-btn c-btn-2 more-btn">全部课程</a>
              </section>
            </div>
          </section>
        </div>
        <!-- /网校课程 结束 -->
        <!-- 网校名师 开始 -->
        <div>
          <section class="container">
            <header class="comm-title">
              <h2 class="tac">
                <span class="c-333">名师大咖</span>
              </h2>
            </header>
            <div>
              <article class="i-teacher-list">
                <ul class="of">
                  <li v-for="(teacher,index) in teacherList" v-bind:key="index">
                    <section class="i-teach-wrap">
                      <div class="i-teach-pic">
                        <a :href='"/teacher/"+teacher.id' :title="teacher.name">
                          <img :alt="teacher.name" :src="teacher.avatar">
                        </a>
                      </div>
                      <div class="mt10 hLh30 txtOf tac">
                        <a :href='"/teacher/"+teacher.id' :title="teacher.name"
                           class="fsize18 c-666">{{teacher.name}}</a>
                      </div>
                      <div class="hLh30 txtOf tac">
                        <span class="fsize14 c-999">{{teacher.career}}</span>
                      </div>
                      <div class="mt15 i-q-txt">
                        <p class="c-999 f-fA">
                          {{teacher.intro}}
                        </p>
                      </div>
                    </section>
                  </li>
                </ul>
                <div class="clear"></div>
              </article>
              <section class="tac pt20">
                <a href="/teacher" title="全部讲师" class="comm-btn c-btn-2 more-btn">全部讲师</a>
              </section>
            </div>
          </section>
        </div>
        <!-- /网校名师 结束 -->

        <div>
          <section class="container">
            <header class="comm-title">
              <h2 class="tac">
                <span class="c-333">图文</span>
              </h2>
            </header>
            <div>
              <article class="index-section-body">
                <div class="topic-course-item hover:shadow-lg" v-for="(item,index) in articleList" :key="'art'+index"
                     @click="$router.replace('article/'+item.id)">
                  <div class="topic-course-thumb"><img :src="item.coverImage">
                  </div>
                  <div class="topic-course-body">
                    <div class="topic-course-title">{{item.title}}</div>
                    <div class="topic-course-info"><span
                      class="topic-course-sub"><span>{{item.viewCount}}人已阅读</span></span></div>
                  </div>
                </div>
              </article>
              <section class="tac pt20">
                <a href="/article" title="全部图文" class="comm-btn c-btn-2 more-btn">全部图文</a>
              </section>
            </div>
          </section>
        </div>

        <div>
          <section class="container">
            <header class="comm-title">
              <h2 class="tac">
                <span class="c-333">学习路径</span>
              </h2>
            </header>
            <div>
              <article class="index-section-body">
                <div class="learnpath-course-item hover:shadow-lg" v-for="(item,index) in pathList" :key="'path'+index"
                     @click="$router.replace('path/'+item.id)">
                  <div class="learnpath-course-thumb"><img :src="item.cover" >
                  </div>
                  <div class="learnpath-course-body">
                    <div class="learnpath-course-title"> {{item.name}}</div>
                    <div class="learnpath-course-info"><span class="learnpath-course-charge"><small>￥</small>{{item.price}}</span>
                      <!----><span class="learnpath-course-step"><span>{{item.stepsCount}}步骤</span><span class="colline">|</span><span>{{item.coursesCount}}课程</span></span>
                    </div>
                    <p class="learnpath-course-sub">{{item.description}}</p></div>
                </div>


              </article>
              <section class="tac pt20">
                <a href="/path" title="全部路径" class="comm-btn c-btn-2 more-btn">全部路径</a>
              </section>
            </div>
          </section>
        </div>

      </div>
    </div>
    <Backtop></Backtop>
  </div>
</template>

<script>
  import index from '@/api/index'
  import YBanner from '~/components/Banner'
  import Backtop from '~/components/Backtop'

  export default {

    data() {
      return {
        //幻灯片配置
        swiperOption: {
          //配置分页
          autoHeight: true,
          pagination: {
            el: '.swiper-pagination'//分页的dom节点
          },
          //配置导航
          navigation: {
            nextEl: '.swiper-button-next',//下一页dom节点
            prevEl: '.swiper-button-prev'//前一页dom节点
          }
        },
        bannerList: [],
        teacherList: {},
        courseList: {},
        //banner上的分类

        subjectList: {},
        articleList: {},
        pathList: {},
        loading: true,
        allLoading: true,
        /*loading: false,
        allLoading: false,*/
      }
    },
    components: {
      YBanner,
      Backtop
    }, mounted() {
      this.initDataObj()
      /*setTimeout(() => {
        this.loading = false;
      }, 500)*/
    },
    methods: {
      initDataObj() {
        index.getList().then(response => {
          //console.log("1111",response)
          this.bannerList = response.bannerList
          this.allLoading = false
          this.teacherList = response.teacherList
          this.courseList = response.courseList
          this.subjectList = response.subjectList
          this.articleList = response.articleList
          this.pathList = response.pathList
          //console.log( this.subjectList)
          // this.loading=false
          setTimeout(() => (this.loading = false), 500)
        })
      }
    },
    /*asyncData({params, error}) {
      return index.getList().then(response => {
        //console.log("1111",response)
        return {
          bannerList: response.bannerList,
          teacherList: response.teacherList,
          courseList: response.courseList,
          subjectList: response.subjectList,
          articleList: response.articleList,
        }
      })
    }*/
  }
</script>
<style scoped>
  /deep/ .el-loading-spinner {
    top: 15%;
  }
</style>
